<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
        <script>

            $(function(){


                $("#username").blur(function(){



                    var username=$(this).val();



                    <%--$.get("${pageContext.request.contextPath}/validateUsername?username="+username,--%>
                          <%--function(message){--%>
                            <%--$("#validateUsernameMessage").text(message);--%>
                          <%--});--%>


                    <%--$.get("${pageContext.request.contextPath}/validateUsername",--%>
                        <%--{"username":username},--%>
                        <%--function(message){--%>
                            <%--$("#validateUsernameMessage").text(message);--%>
                        <%--});--%>

                    <%--$.get("${pageContext.request.contextPath}/validateUsername",--%>
                        <%--"username="+username,--%>
                        <%--function(message){--%>
                            <%--$("#validateUsernameMessage").text(message);--%>
                        <%--});--%>


                    <%--$.get("${pageContext.request.contextPath}/validateUsername",--%>
                        <%--$("#f").serialize(),--%>
                        <%--function(message){--%>
                            <%--$("#validateUsernameMessage").text(message);--%>
                        <%--});--%>


                    <%--$.post("${pageContext.request.contextPath}/validateUsername",--%>
                           <%--$("#f").serialize(),--%>
                           <%--function(message){--%>
                               <%--$("#validateUsernameMessage").text(message);--%>
                           <%--});--%>


                    <%--$.ajax("${xxx}/xxxx",{});--%>
                    <%--$.ajax({--%>
                        <%--url:"${xxx}/xxx"--%>
                    <%--});--%>


                    $.ajax({
                        url:"${pageContext.request.contextPath}/validateUsername",
                        data:{"username":username},
                        type:"POST",
                        dataType:"text",
                        headers:{"a":"1"},
                        error:function(){
                            $("#validateUsernameMessage").html("<font color='red'>组件错误</font>");
                        },
                        success:function(message){
                            $("#validateUsernameMessage").text(message);
                        },
                        beforeSend:function(){
                            $("#validateUsernameMessage").text("正在校验...");
                        }

                    });



                });


                $("#validateUsernameMessage").ajaxStart(function(){
                    $(this).text("正在校验...");
                });



                $("#validateUsernameMessage").ajaxError(function(){
                    $(this).text("组件错误");
                });


            });

        </script>
    </head>
    <body>

        <form id="f" action="${pageContext.request.contextPath}/regist" method="post">
            用户名：<input id="username" type="text" name="username"/><span id="validateUsernameMessage"></span><br/>
            密码：<input type="password" name="password"/><br/>
            电话：<input type="text" name="phone"/><br/>
            <input type="submit" value="注册"/>
        </form>

        ${message}
    </body>
</html>
